<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>
          <a-col :md='4' :sm='6'>
            <a-form-item label='计划编号'>
              <a-input placeholder='请输入' v-model='queryParam.planNo'></a-input>
            </a-form-item>

          </a-col>
          <a-col :md='4' :sm='6'>
            <a-form-item label='计划名称'>
              <a-input placeholder='请输入' v-model='queryParam.planName'></a-input>
            </a-form-item>

          </a-col>
          <a-col :md='4' :sm='6'>
            <a-form-item label='计划年度'>
              <a-date-picker
                mode='year'
                placeholder='请选择年份'
                format='YYYY'
                :allowClear="false"
                value-format='yyyy-MM-dd'
                v-model='queryParam.year'
                :open='yearPickShow'
                style='width: 100%'
                @panelChange='handlePanelChange'
                @openChange='handleOpenChange' />
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='6'>
            <a-form-item label='计划类型'>
              <j-dict-select-tag style='width: 100%' v-model='queryParam.planType' placeholder='请选择'
                                 dict-code='inconplantype' />
            </a-form-item>
          </a-col>


          <a-col :md='6' :sm='8'>
            <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
            <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>清除条件</a-button>

          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- <div style='width: 100%;display: flex;align-content: center;justify-content: flex-end;padding: 8px 16px'>
      <a-button size='small' type='primary' icon='' style='margin-right: 16px'>整改批量导出</a-button>
      <a-button size='small' type='primary' icon=''>缺陷批量导出</a-button>
    </div> -->
    <a-table
      ref='table'
      size='middle'
      bordered
      rowKey='id'
      :columns='columns'
      :dataSource='dataSource'
      :pagination='ipagination'
      :loading='loading'
      @change="handleTableChange"
    >
      <span slot='年度计划附件'>
          <a-button size='small' type='link' icon=''>查看</a-button>
        </span>
      <span slot='action' slot-scope="text,record">
          <a-button size='small' type='link' icon='' @click='handleViewDetail(record)'>查看</a-button>
        </span>
      <span slot='confirmEnd'>
          <a-button size='small' type='link'>确认</a-button>
        </span>
    </a-table>
    <!-- table区域-end -->
    <detailModel ref='detailModel'></detailModel>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import columns from './indexColumns'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import moment from 'moment'
import detailModel from './searchResult/index'

export default {
  name: 'ss',
  mixins: [JeecgListMixin],
  components: { detailModel },
  data() {
    return {
      // 表头
      columns: columns(this),
      url: {
        list: '/incon/inconReviewPlan/queryPlanArchive'
      },
      yearPickShow: false,
      dataSource: [
        {
          序号: 1,
          计划编号: 'xxxxxxx',
          计划名称: 'xxxxxxxxx',
          计划年度: '2021',
          计划类别: '年度',
          审批状态: '待审批'
        }
      ]
    }
  },
  computed: {},
  methods: {
    openCreatModel() {
      this.$refs.creatModel.visible = true
    },
    handleAddSubmit(evt) {
      return new Promise((re, rj) => {
        postAction(this.url.add, evt).then(res => {
          if (res.success) {

            this.$refs.table.loadData()
            this.$message.success(res.message)
            re(res.success)
          } else {
            rj(res.success)
            this.$message.error(res.message)
          }
        })
      })
    },
    handlePanelChange(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearPickShow = false
      this.$refs.form.validateField('year', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    handleViewDetail(row) {
      this.$refs.detailModel.getPlanId(row)
      this.$refs.detailModel.visible = true
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>